<template>
  <div>
    <center><h1>注册</h1></center>
    <a-form-item label="用户名" v-bind="formlayout">
      <a-input
        v-model="username"
        placeholder="请输入用户名"
        id="username"
      ></a-input>
    </a-form-item>

    <a-form-item label="密码" v-bind="formlayout">
      <a-input
        v-model="password"
        placeholder="请输入密码"
        id="password"
      ></a-input>
    </a-form-item>

    <a-form-item label="确认密码" v-bind="formlayout">
      <a-input
        v-model="password2"
        placeholder="确认密码"
        id="password2"
      ></a-input>
    </a-form-item>

    <a-form-item label="验证码" v-bind="formauthcode">
      <a-input
        v-model="authcode"
        placeholder="请输入验证码"
        id="verify"
      ></a-input>

      <img
        id="img"
        :src="'http://192.168.1.65:8000/myapp/code/?uuid=' + uuid"
        @click="refreshimg()"
        style="width: 250px"
      />
      <a-button type="primary" @click="audio">获取语音验证码</a-button>

      <audio
        :src="code_url"
        controls="controls"
        preload="auto"
        v-if="isaudio"
      ></audio>
    </a-form-item>

    <a-button type="primary" @click="register">用户注册</a-button>
  </div>
</template>

<script>
import { getcode, userregister } from "./axios_http/api";
export default {
  data() {
    return {
      code_url: "http://192.168.1.65:8000/static/upload/code.mp3",
      isaudio: false,
      imgurl: "",
      username: "",
      password: "",
      password2: "",
      authcode: "",
      uuid: "",
      // 表单样式
      formlayout: {
        // 标签
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        // 文本框
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
      },
      formauthcode: {
        // 标签
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        // 文本框
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 4 },
        },
      },

      // 按钮样式
      buttonlayout: {
        // 按钮
        wrapperCol: {
          xs: { span: 24, offset: 0 },
          sm: { span: 16, offset: 8 },
        },
      },
    };
  },
  methods: {
    // 该为true展示音频
    audio() {
      this.isaudio = true;
    },
    //注册
    register() {
      let data = {
        username: this.username,
        password: this.password,
        password2: this.password2,
        code: this.authcode,
        uuid: this.uuid,
      };
      userregister(data).then((resp) => {
        console.log(resp);
        this.$message.info(resp.data.msg);
      });
    },
    // 刷新图片
    refreshimg() {
      this.get_uuid();
    },
    // 获取uuid
    get_uuid() {
      var s = [];
      var hexDigits = "0123456789abcdef";
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = "-";

      this.uuid = s.join("");
    },
  },
  created() {
    this.get_uuid();
  },
};
</script>